<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 长度单位
            像素px：
                屏幕是由一个一个小点组成
                像素越小显示的效果越好

            百分比：可以将属性设为父元素的百分比

            em：根据字体大小设置
                1em = 1font-size   一般网页默认字体16px  也可以自己设置font-size
            
            rem：根据根标签html的字体大小设置



        */
        html{
            font-size: 30px;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: teal;
        }
        .box2{
            width: 50%;
            height: 50%;
            background-color: rgb(98, 0, 128);
        }

        .box3{
            font-size: 10px;
            width: 10em;
            height: 10em;
            background-color: rgb(128, 0, 0);
        }
        .box4{

            width: 10rem;
            height: 10rem;
            background-color: rgb(0, 128, 79);
        }

        /* 颜色单位
                RGB值：red green blue 光的三原色
                语法：RGB(0-255,0-255,0-255)
                其中0-255也可以用0%-100%代替

                RGBA值：RGB和 上面一样，后面加了一个A代表透明度0-1  0就是透明  1是不透明

                十六进制表示颜色：#000000  每两位数字代表一种颜色 范围是00-ff  从左到右分别是r g b
                                如果两位重复则可以合并  比如#aabbcc  等价与#abc


                HLS值和HLSA值
                H色相（0-360）
                S饱和度（0%-100%）
                L亮度（0%-100%）
                A透明度0-1
        */
        .box5{

            width: 10rem;
            height: 10rem;
            background-color: rgb(0, 12, 79);
            color: rgba(180, 72, 0, 0.5);
        }
        .box6{

            width: 10rem;
            height: 10rem;
            background-color: #23b68a;
            color: hsla(200, 50%, 50%, 1);

        }
    </style>

</head>
<body>
    <div class="box1">
        <div class="box2"></div>

    </div>

    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5">xixix</div>
    <div class="box6">哈哈哈哈哈哈哈哈哈哈哈</div>
</body>
</html>